<template>
    <view class="register bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[100rpx] box-border">
        <view class="w-full">
            <view class="text-2xl font-medium mb-[60rpx]">注册新用户</view>
            <u-form borderBottom :label-width="150">
                <u-form-item label="手机号" borderBottom>
                    <u-input class="flex-1" v-model="formData.phone" :border="false" placeholder="请输入手机号码" />
                </u-form-item>
                <u-form-item label="验证码" borderBottom>
                    <u-input class="flex-1" v-model="formData.mobileCode" placeholder="请输入验证码" :border="false" />
                    <view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
                        @click="sendSms">
                        <u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange" change-text="x秒" />
                        <text :class="formData.phone ? 'text-primary' : 'text-muted'">
                            {{ codeTips }}
                        </text>
                    </view>
                </u-form-item>
                <u-form-item label="新密码" borderBottom>
                    <u-input class="flex-1" type="password" v-model="formData.password" placeholder="6-20位数字+字母或符号组合"
                        :border="false" />
                </u-form-item>
                <u-form-item label="确认密码" borderBottom>
                    <u-input class="flex-1" type="password" v-model="formData.password2" placeholder="再次输入新密码"
                        :border="false" />
                </u-form-item>
            </u-form>
            <view class="mt-[100rpx]">
                <u-button type="primary" shape="circle" @click="handleConfirm"> 确定 </u-button>
                <u-button type="default" shape="circle" style="margin-top: 10px;" @click="goBack"> 返回 </u-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { register } from '@/api/account'
import { smsSend } from '@/api/app'
import { reactive, ref, shallowRef } from 'vue'

const uCodeRef = shallowRef()
const codeTips = ref('')
const formData = reactive({
    phone: '',
    mobileCode: '',
    password: '',
    password2: ''
})

const codeChange = (text: string) => {
    codeTips.value = text
}

const sendSms = async () => {
    if (!formData.phone) return
    if (uCodeRef.value?.canGetCode) {
        await smsSend(formData.phone)
        uni.$u.toast('发送成功')
        uCodeRef.value?.start()
    }
}

const handleConfirm = async () => {
    if (!formData.phone) return uni.$u.toast('请输入手机号码')
    if (!formData.mobileCode) return uni.$u.toast('请输入手机号码')
    if (!formData.password) return uni.$u.toast('请输入密码')
    if (!formData.password2) return uni.$u.toast('请输入确认密码')
    if (formData.password != formData.password2) return uni.$u.toast('两次输入的密码不一致')
    const { code, msg } = await register(formData)

    if (code === 1) {
        uni.$u.toast(msg)
    } else {
        uni.$u.toast('操作成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 1000)
    }
}
const goBack = () => {
    uni.redirectTo({
        url: '/pages/login/index'
    })
}
</script>

<style lang="scss">
page {
    height: 100%;
}
</style>
